<template>
    <scroll-view
        :scroll-y="true"
        :style="{
            height: 'calc(100vh)',
        }"
    >
        <view class="navbar">
            <navbar title="选择人数" bgColor="#000" fontColor="#fff"> </navbar>
        </view>
        <u-popup
            :safeAreaInsetBottom="true"
            :show="true"
            :round="40"
            mode="center"
            :closeable="true"
            @close="close"
            @touchmove.stop
        >
            <view class="box">
                <view class="title">请选择人数</view>
                <view class="table_no">{{ order_info.table_no }}</view>
                <view class="number">
                    <u-row v-for="(row, r_index) in number" :key="r_index">
                        <u-col
                            span="3"
                            v-for="(col, c_index) in row"
                            :key="c_index"
                            textAlign="center"
                            @click="selectPeopleNumber(col)"
                        >
                            <view
                                :class="{
                                    col: true,
                                    select: peopleNumber == col,
                                }"
                            >
                                {{ col }}
                            </view>
                        </u-col>
                    </u-row>
                </view>
            </view>
        </u-popup>
    </scroll-view>
</template>
<script>
import { mapState } from "vuex"; //引入mapState
import PageApi from "@/api/page"
export default {
    data() {
        return {
            number: [
                [1, 2, 3, 4],
                [5, 6, 7, 8],
                [9, 10, 11, 12],
                [13, 14, 15, 16],
                [17, 18, 19, 20],
            ],
            peopleNumber: 0,
        };
    },
    computed: {
        ...mapState({
            order_info: (state) => state.cart.order_info,
            cart_info: (state) => state.cart.cart_info,
          payment: (state) => state.cart.payment
        }),
    },
    methods: {
        close() {
            uni.navigateBack({ delta: 1 });
        },
        selectPeopleNumber(number) {
            const self = this
            this.peopleNumber = number;
            this.order_info.cust_sum = number
            this.$store.commit("cart/setOrderInfo", this.order_info);
            setTimeout(() => {
                // uni.navigateTo({ url: "/pages/ordering/ordering" });
              // 进行调用订单生成
              // 订单保存
              PageApi.orderSave({
                order_info: self.order_info,
                cart_info: self.cart_info,
                coupons: [],
                payment: self.payment
              }).then(res=>{
                if(res.code == 200){
                  self.$store.commit("cart/setOrderInfo",res.data)
                  // 跳转到付款页面
                  uni.navigateTo({
                    url: "/pages/ordering/settlement"
                  });
                }
              })
            }, 200);
        },
    },
    onShow() {
        if (this.$store.state.totalPrice == 0) {
            uni.navigateTo({ url: "/pages/index/index" });
        }
    },
};
</script>
<style lang="scss">
.box {
    width: 600rpx;
    padding: 30rpx;
    .title {
        width: 100%;
        text-align: center;
        font-size: 40rpx;
    }
    .table_no {
        width: 100%;
        text-align: center;
        color: red;
        font-size: 36rpx;
        font-weight: 500;
        margin: 20rpx 0;
    }
    .number {
        margin-bottom: 60rpx;
    }
}
.col {
    margin: 0 -1px -1px 0;
    border: 1px black solid;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38rpx;
}

.select {
    background-color: #f9ae3d;
    color: #fff;
}
</style>
